<script>
export default {
  data() {
    return {
      tableData: [],
      user:{
        username:'',
        password:'',
      },
    }
  },
  methods: {
    loadMySelf() {
      let _this = this;
      this.$axios({
        method: 'get',
        url: 'user/mySelf/' + this.username,
      }).then(res => {
        console.log(res.data.data)
        _this.tableData.push(res.data.data);
      }).catch(error => {
        _this.$message.error(error);
      })
    },
    goUpdateUser(username) {
      let _this=this;
      this.$prompt('请输入修改的密码', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(({value}) => {
        console.log(value)
        this.tableData[0].password=value;
        this.user.username=this.tableData[0].username;
        this.user.password=this.tableData[0].password;
        console.log(this.user)
        this.$axios({
          method:'put',
          url:'user/updatePassword',
          data:JSON.stringify(this.user),
        }).then(res=>{
          console.log(this.tableData);
          _this.$message({
            type:'success',
            message:'修改成功'
          })
        }).catch(error=>{
          _this.$message.error(error)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        });
      });
    }
  },
mounted()
{
  this.username = sessionStorage.getItem('loginUsername');
  this.loadMySelf();
}
}

</script>

<template>
  <div>
    <el-table
      :data="tableData"
      style="width:100%">
      <el-table-column
        type="index"
        label="序号"
        align="center"
        width="150">
      </el-table-column>
      <el-table-column
        prop="username"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="password"
        label="密码"
        width="180">
      </el-table-column>
      <el-table-column
        prop="role.roleName"
        label="角色">
      </el-table-column>
      <el-table-column
        label="操作"
        width="250">
        <!--
          scope：可以看做是 Excel 中的所有行的数据
          scope.row
          scope.row.属性名
        -->
        <template slot-scope="scope">
          <el-button type="primary" size="medium" icon="el-icon-edit" @click="goUpdateUser(scope.row)">修改密码</el-button>
        </template>
      </el-table-column>


    </el-table>
  </div>


</template>

<style>

</style>
